<template>
	<view class="common-container app-container">
		<view class="status_bar"> </view>
		<u-navbar title="消息">
			<view class="u-nav-slot" slot="left">
			</view>
		</u-navbar>

		<view class="main-wrap has-navbar-tabbar">
			<view class="tab-container">
				<u-tabs :list="tabList" :scrollable="false" :current="activeTab" @click="handleTabClick"></u-tabs>
			</view>
			<u-empty mode="message" class="empty-container"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '未读通知',
				}, {
					name: '已读通知',
				}, {
					name: '待办任务',
					badge: {
						value: 5,
					}
				}, {
					name: '已办任务'
				}],
				activeTab: 0
			}

		},
		onLoad() {

		},
		methods: {
			handleTabClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs__wrapper__nav__item {
		position: relative;

		.u-badge {
			position: absolute;
			top: 6px;
			right: 7px;
		}
	}
</style>